<template>
	<div class="strut-div">
		<div :id="config.option.id" class="strut-div" style="height: 100%;width: 100%;"></div>
	</div>
</template>

<script>
	import echarts from 'echarts';
  require("echarts/lib/component/legend");
	import autoHover from '../../util/autoHover.js';
  export default {
    name: "CommonPieNewChart",
    props: ['config'],
    data() {
      return {
        chart: null,
				timeTicket:null,
      }
    },
    methods: {
      initChart() {
        let option = {
          color: this.config.option.color,
          title: this.config.option.title,
          tooltip: this.config.option.tooltip,
          legend: this.config.option.legend,
          toolbox: {
            show: false,
          },
          // calculable: true,
          series: [],
          dataset: {}
        };

        setTimeout(() => {
          option.series = this.config.option.series
          option.dataset = this.config.option.dataset
          this.chart.setOption(option);
          this.timeTicket = autoHover.autoHover(this.chart,option,option.color.length);
        }, 100);

      },
      refreshChart() {

      },
    },
    mounted() {
      this.chart = echarts.init(document.getElementById(this.config.option.id));
    },
		beforeDestroy() {
			autoHover.stopHover(this.timeTicket);
		}

  }
</script>

<style scoped lang="scss" type="text/scss">

</style>
